<template>
    <p>{{originalState.count.number}}</p>
    <button @click="addOriginalState">addOriginalState</button>
    <hr/>
    <p>{{readonlyState.count.number}}</p>
    <button @click="addReadonlyState">addReadonlyState</button>
</template>
<script setup>
import {ref,reactive,readonly,shallowReadonly} from 'vue';
const originalState = reactive({count:{number:0}});
const addOriginalState=()=>originalState.count.number++;
//当你想确保某个响应式对象或引用对象不被 意外修改的
//并且还能观察到它的变化的话可以使用only
//shallowReadonly只管根属性不能变，子属性不管，可以改
const readonlyState = shallowReadonly(originalState);
//Readonly.vue:13 [Vue warn] Set operation on key "count" failed: target is readonly. Proxy(Object) {count: 25}

const addReadonlyState=()=>{
    //根属性的值不能改，但是根属性的值如果是一个对象的它，这个对象的属性是可以修改的
    //readonlyState.count.number++
    readonlyState.count={number:1}
};

</script>